<template>
  <el-checkbox-group v-model="formValue" v-bind="$attrs" v-on="$listeners">
    <template v-if="$attrs.__config__.optionType == 'button'">
      <el-checkbox-button
        v-for="item in __slot__.options"
        :key="item.value"
        :label="item.value"
        :value="item.value"
        :disabled="item.disabled"
        :border="$attrs.__config__.border"
        >{{ item.label }}</el-checkbox-button
      >
    </template>
    <template v-else>
      <el-checkbox
        v-for="item in __slot__.options"
        :key="item.value"
        :label="item.value"
        :value="item.value"
        :disabled="item.disabled"
        :border="$attrs.__config__.border"
        >{{ item.label }}</el-checkbox
      >
    </template>
  </el-checkbox-group>
</template>

<script>
export default {
  name: "form-checkbox-group",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    // 外层组件内部组件的数据
    __slot__: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    formValue: {
      get() {
        return this.value ? this.value.split(",") : [];
      },
      set(val) {
        this.$emit("update", val ? val.join(",") : "");
      },
    },
  },
};
</script>

<style lang="scss" scoped></style>
